<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>武汉周末游地图</title>
    <!-- 引入高德地图JS API -->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=e18e66edf3e406ef922d9bc9b02e93fc"></script>
    <style>
        #container {
            width: 100%;
            height: 100vh;
        }

        #legend {
            position: absolute;
            top: 100px;
            left: 10px;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 0 5px #999;
            z-index: 1000;
            display: block;
        }
        #legend h4 {
            margin-top: 0;
        }
        #toggleLegend {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 1001;
            background: #fff;
            border: none;
            padding: 15px 20px; /* 增大按钮的内边距 */
            font-size: 18px;    /* 增大字体大小 */
            border-radius: 10px; /* 增加圆角 */
            cursor: pointer;
            box-shadow: 0 0 10px #999; /* 增强按钮的阴影效果 */
            font-weight: bold;  /* 让文字更加醒目 */
        }

    </style>
</head>
<body>
<div id="container"></div>
<button id="toggleLegend">隐藏图例</button>
<div id="legend">
    <h4>图例</h4>
    <p><img src="https://yujunhao.oss-cn-huhehaote.aliyuncs.com/hhl_logo.png" style="width: 20px;"> 黄鹤楼 </p>
    <p><img src="https://yujunhao.oss-cn-huhehaote.aliyuncs.com/gds_logo.png" style="width: 20px;"> 古德寺 </p>
    <p><img src="https://yujunhao.oss-cn-huhehaote.aliyuncs.com/mt_logo.png" style="width: 20px;"> 渡轮码头 </p>
    <p><img src="https://yujunhao.oss-cn-huhehaote.aliyuncs.com/jhl_logo.png" style="width: 20px;"> 江汉路步行街 </p>
    <p><img src="https://yujunhao.oss-cn-huhehaote.aliyuncs.com/lhpl_logo.png" style="width: 20px;"> 黎黄陂路建筑群 </p>
    <p><img src="https://yujunhao.oss-cn-huhehaote.aliyuncs.com/hundsun_logo.webp" style="width: 20px;"> 牛马公司 </p>
    <p><img src="https://yujunhao.oss-cn-huhehaote.aliyuncs.com/kg_logo.png" style="width: 20px;"> 武汉空轨 </p>
</div>
<script type="text/javascript">
    //图例
    var toggle = document.getElementById('toggleLegend');
    var legend = document.getElementById('legend');

    toggle.onclick = function() {
        if (legend.style.display === 'none') {
            legend.style.display = 'block';
            toggle.textContent = '隐藏图例';
        } else {
            legend.style.display = 'none';
            toggle.textContent = '显示图例';
        }
    };

    //地图
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 14,
        center: [114.29815,30.565112] // 设置中心点为长江
    });

    // 创建不同的图标
    var hhlIcon = new AMap.Icon({
        size: new AMap.Size(50, 50), // 图标尺寸
        image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/hhl_logo.png', // 黄鹤楼图标
        imageSize: new AMap.Size(50, 50)
    });

    var gdsIcon = new AMap.Icon({
        size: new AMap.Size(30, 30), // 图标尺寸
        image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/gds_logo.png', // 古德寺图标
        imageSize: new AMap.Size(30, 30)
    });

    var mtIcon = new AMap.Icon({
        size: new AMap.Size(50, 50), // 图标尺寸
        image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/mt_logo.png', // 码头图标
        imageSize: new AMap.Size(50, 50)
    });

    var jhlIcon = new AMap.Icon({
        size: new AMap.Size(30, 30), // 图标尺寸
        image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/jhl_logo.png', // 江汉路图标
        imageSize: new AMap.Size(30, 30)
    });

    var kgIcon = new AMap.Icon({
        size: new AMap.Size(30, 30), // 图标尺寸
        image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/kg_logo.png', // 空轨图标
        imageSize: new AMap.Size(30, 30)
    });

    var lhplIcon = new AMap.Icon({
        size: new AMap.Size(30, 30), // 图标尺寸
        image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/lhpl_logo.png', // 黎黄陂路图标
        imageSize: new AMap.Size(30, 30)
    });

    var hundsunIcon = new AMap.Icon({
        size: new AMap.Size(60, 60), // 图标尺寸
        image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/hundsun_logo.webp', // 恒生电子图标
        imageSize: new AMap.Size(60, 60)
    });

    var blueIcon = new AMap.Icon({
        size: new AMap.Size(50, 50), // 图标尺寸
        image: 'https://yujunhao.oss-cn-huhehaote.aliyuncs.com/mark_b.png', // 蓝色图标
        imageSize: new AMap.Size(50, 50)
    });

    // 创建标记的函数
    function createMarker(lngLat, icon, title) {
        var marker = new AMap.Marker({
            position: lngLat,
            icon: icon, // 设置图标
            title: title // 设置标记的名称
        });

        // 创建信息窗口
        var infoWindow = new AMap.InfoWindow({
            content: title, // 信息窗口的内容
            offset: new AMap.Pixel(0, -30) // 信息窗口的偏移量
        });

        // 为标记添加点击事件，点击标记时显示信息窗口
        marker.on('click', function() {
            infoWindow.open(map, marker.getPosition()); // 在标记位置打开信息窗口
        });

        marker.setMap(map);
    }

    // 创建标记并加上文字备注
    createMarker(new AMap.LngLat(114.302467,30.544649), hhlIcon, '黄鹤楼');
    createMarker(new AMap.LngLat(114.307288,30.618717), gdsIcon, '古德寺');
    createMarker(new AMap.LngLat(114.294686,30.550602), mtIcon, '中华路码头(武昌)');
    createMarker(new AMap.LngLat(114.297382,30.575406), mtIcon, '武汉关码头(汉口)');
    createMarker(new AMap.LngLat(114.292306,30.579581), jhlIcon, '江汉路步行街');
    createMarker(new AMap.LngLat(114.299839,30.586276), lhplIcon, '黎黄陂路建筑群');
    createMarker(new AMap.LngLat(114.262222,30.590167), hundsunIcon, '恒生电子');
    createMarker(new AMap.LngLat(114.227064,30.528377), kgIcon, '星空酒店 | ￥155');
    createMarker(new AMap.LngLat(114.253687,30.619692), kgIcon, 'YES花园酒店 | ￥275');
    createMarker(new AMap.LngLat(114.397772,30.636209), blueIcon, '开元大酒店 | ￥410');
    createMarker(new AMap.LngLat(114.489724,30.500037), kgIcon, '空轨 - 九峰山山站');
    createMarker(new AMap.LngLat(114.494016,30.488227), kgIcon, '空轨 - 高新大道站');
    createMarker(new AMap.LngLat(114.495913,30.474432), kgIcon, '空轨 - 高新二路站');
    createMarker(new AMap.LngLat(114.493549,30.457212), kgIcon, '空轨 - 高新四路站');
    createMarker(new AMap.LngLat(114.493854,30.44089), kgIcon, '空轨 - 综保区站');
    createMarker(new AMap.LngLat(114.504675,30.416812), kgIcon, '空轨 - 龙泉山站');
    // createMarker(new AMap.LngLat(120.164026, 30.254651), blueIcon, '西湖景区');


    //2、添加路线标记
    //2.1 游轮航线
    // 多个地铁站的经纬度
    var ferryLine = [
        [114.294686,30.550602],
        [114.297382,30.575406]
    ];

    // 创建一个折线对象，连接所有地铁站
    var ferryPolyline1 = new AMap.Polyline({
        path: ferryLine, // 所有地铁站的经纬度路径
        strokeColor: "#00ADEF", // 线路颜色（设置为明亮的蓝色以模拟水色）
        strokeOpacity: 1, // 线路的透明度
        strokeWeight: 4, // 线路的粗细
        lineJoin: 'round', // 线条连接处样式
        lineCap: 'round', // 线条的端点样式
        strokeStyle: "dashed", // 设置线条为虚线
        strokeDasharray: [10, 5, 10, 5] // 自定义虚线的样式，数组内为线段和间隙的长度
    });


    // 将折线添加到地图中
    ferryPolyline1.setMap(map);

    //2.2 汉口火车站 - 古德寺
    // 多个地铁站的经纬度
    var metroLine1 = [
        [114.254983,30.615506], // 汉口站-地铁站
        [114.260311,30.606033], // 范湖-地铁站
        [114.27579,30.604121],
        [114.281497,30.603022],
        [114.284746,30.605255],
        [114.291523,30.612999],
        [114.297062,30.617906],
        [114.303979,30.623678]
    ];

    // 创建一个折线对象，连接所有地铁站
    var metroPolyline1 = new AMap.Polyline({
        path: metroLine1, // 所有地铁站的经纬度路径
        strokeColor: "#5DB996", // 线路颜色
        strokeOpacity: 1, // 线路的透明度
        strokeWeight: 9, // 线路的粗细，数值越大越粗
        lineJoin: 'round', // 线条连接处样式
        lineCap: 'round' // 线条的端点样式
    });

    // 将折线添加到地图中
    metroPolyline1.setMap(map);

    //2.3 古德寺 - 黎黄陂路
    // 多个地铁站的经纬度
    var metroLine2 = [
        [114.313923,30.617818],
        [114.308216,30.608425],
        [114.308178,30.608408],
        [114.301377,30.598734],
        [114.294992,30.592523]

    ];

    // 创建一个折线对象，连接所有地铁站
    var metroPolyline2 = new AMap.Polyline({
        path: metroLine2, // 所有地铁站的经纬度路径
        strokeColor: "#8D0B41", // 线路颜色
        strokeOpacity: 1, // 线路的透明度
        strokeWeight: 9, // 线路的粗细，数值越大越粗
        lineJoin: 'round', // 线条连接处样式
        lineCap: 'round' // 线条的端点样式
    });

    // 将折线添加到地图中
    metroPolyline2.setMap(map);


</script>
</body>
</html>
